<template>
	<view class="pointPurchase">
		<view class="topBox">
			<image src="https://wx.2024csnl.com/static/mine/pointIcon.png"></image>
			<view class="topText ">
				<view style="margin-bottom: 20rpx;">剩余泌豆</view>
				<view class="between" style="align-items: flex-end;">
					<view class="score">{{score}}</view>
					<view @click="onSkip(`/package/mine/businessScoreList?bid=${bid}`)">泌豆明细<uni-icons type="right"
							color="#fff"></uni-icons>
						</image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="false" class="mainBox">
			<view>充值泌豆</view>
			<view class="inputBox flex">
				<text>￥</text>
				<input v-model="nums" type="number" placeholder="请输入充值金额" placeholder-style="color:#ccc" />
			</view>
			<view class="hint">*充值说明：泌豆最低500元起充、泌豆比例{{bl}}</view>
			<view class="hintTit">选择支付方式</view>
			<m-pay-radio @payType="getPayType" :payList="payList"></m-pay-radio>
			<view class="flex-center">
				<view class="submitBtn flex" @click="onSetImmediatePayment">充值</view>
			</view>
			<view class="agreement">点击充值即表示已阅读并同意 充值协议<text
					@click="onSkip('/package/mine/agreement?pageType=充值协议')">充值协议</text></view>
		</view>
	</view>
</template>

<script>
	import {
		merchantScoreRecharge,
		merchantScoreNums
	} from "../../api/index.js"
	export default {
		data() {
			return {
				score: '',
				bl: '',
				bid: '', //商家id
				nums: '',
				payList: [3, 2, 1],
				payType: 3,
			}
		},
		onLoad(opt) {
			this.bid = opt.bid
			this.getMerchantScoreNums()
		},
		methods: {
			// 立即支付
			async onSetImmediatePayment() {
				console.log(this.payType, 'payType')
				if (this.nums < 500) {
					this.showToast('泌豆最低500起充')
					return
				}
				const res = await merchantScoreRecharge('s=/ApiBusiness/scoregm', {
					bid: this.bid,
					score: this.nums,
					value: this.payType,
				})
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 2 || status == 1) {
					console.log(res, "888888")
					//余额支付
					if (this.payType == 1) {
						this.showToast(res.data.msg)
						setTimeout(() => {
							this.getMerchantScoreNums()
						}, 2000)

					}
					// 微信支付
					if (this.payType == 2) {
						console.log(data, "*****")
						// this.wchatPay(JSON.parse(data))
						// this.onAliOrWchatPay(JSON.parse(data), 'wxpay')
						this.onAliOrWchatPay(data.data, 'wxpay')
					}
					// 支付宝支付
					if (this.payType == 3) {
						// #ifdef H5
						document.querySelector('body').innerHTML = data;
						document.forms[0].submit()
						// #endif
						// #ifdef APP-PLUS
						this.onAliOrWchatPay(data, 'alipay')
						// #endif
					}

				} else {
					let msgText = msg ? msg : '支付错误'
					this.showToast(msgText)
				}
			},
			async onAliOrWchatPay(data, payType) {
				console.log(payType, "*********")
				uni.requestPayment({
					provider: payType,
					orderInfo: data,
					success: (res) => {
						console.log("支付", res)
						this.getMerchantScoreNums()
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				});
			},
			getPayType(e) {
				this.payType = e
			},
			// 获取积分(泌豆)
			async getMerchantScoreNums() {
				const res = await merchantScoreNums('s=/ApiBusiness/bscore', {
					bid: this.bid
				})
				const {
					data,
					bl,
					msg,
					status
				} = res.data
				// console.log(res,"res---")
				if (status == 1) {
					this.bl = bl
					this.score = data
				} else {
					this.showToast(msg)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.agreement {
		text-align: center;
		font-size: 28rpx;
		color: #999;
		margin-top: 30rpx;

		text {
			color: #41644A;
		}
	}

	.submitBtn {
		margin-top: 5vh;
		color: #fff;
		font-size: 34rpx;
		background: #41644A;
		border-radius: 60rpx;
		padding: 20rpx 0;
		justify-content: center;
		width: 80%;
	}

	.mainBox {
		// padding: 0 30rpx;

		.inputBox {
			margin: 28rpx 0 15rpx;
			border-radius: 20rpx;
			align-items: center;
			background: #F5F5F5;
			height: 100rpx;
			padding: 0 30rpx;

			text {
				font-size: 40rpx;
				font-weight: bold;
				margin-right: 28rpx;
			}

		}

		.hint {
			color: #41644A;
			font-size: 28rpx;
		}

		.hintTit {
			margin: 50rpx 0;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	.pointPurchase {
		padding: 30rpx;

		.topBox {
			position: relative;

			image {
				width: 100%;
				height: 300rpx;
			}


		}
	}

	.topText {
		width: 70vw;
		position: absolute;
		top: 80rpx;
		left: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.score {
		font-size: 50rpx;

		font-weight: bold;
	}
</style>